<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../css/bootstrap.min.css" />
		<link rel="stylesheet" href="../../font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css" />
		
		<style>
			html {
				height: 100%;
				width: 100%;
			}
			
			body {
				height: 100%;
				margin: 0;
				padding: 0;
			}
			/*页面整体容器布局*/
			
			.my-container {
				position: fixed;
				/*固定定位*/
				top: 0px;
				bottom: 0px;
				left: 0px;
				right: 0px;
				background-color: #DDDDDD;
				min-width: 800px;
				min-height: 500px;
			}
			/*页面标题*/
			
			.main-title {
				position: absolute;
				/*绝对定位依赖于父元素定位*/
				top: 0px;
				height: 50px;
				width: 100%;
				background-color: #6495ED;
				display: flex;
			}
			/*侧边导航栏*/
			
			.main-nav {
				position: absolute;
				top: 50px;
				left: 0px;
				width: 200px;
				bottom: 50px;
				background-color: #666666;
			}
			/*内容区域*/
			
			.main-content {
				position: absolute;
				top: 50px;
				left: 200px;
				right: 0px;
				bottom: 50px;
				background-color: #FFFFFF;
			}
			/*底部声明*/
			
			.main-bottom {
				position: absolute;
				width: 100%;
				height: 50px;
				line-height: 50px;
				bottom: 0px;
				background-color: #000000;
				text-align: center;
				color: #FFFFFF;
				font-size: 20px;
				letter-spacing: 1px;
			}
			/*标题栏公司信息*/
			
			.main-title>.title-logo {
				position: absolute;
				left: 50px;
				height: 50px;
				line-height: 50px;
				color: #FFFFFF;
				font-size: 26px;
				font-weight: bold;
			}
			/*标题栏个人信息面板*/
			
			.main-title>.personal-info {
				position: absolute;
				right: 150px;
				display: flex;
			}
			/*标题栏个人信息照片*/
			
			.personal-info>.title-photo {
				margin-top: 5px;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				border: 0px solid red;
				background-image: url(../../img/20141009224754_AswrQ.jpeg);
				background-size: 100%;
			}
			/*标题栏个人信息文字*/
			
			.personal-info>.title-info {
				margin-left: 10px;
				height: 50px;
				line-height: 50px;
				border: 0px solid red;
				right: 130px;
				color: #FFFFFF;
				letter-spacing: 2px;
			}
			/*标题栏个人信息文字悬浮*/
			
			.personal-info>.title-info:hover {
				cursor: pointer;
				color: #FD7E14;
			}
			/*侧边导航栏菜单面板*/
			
			.menu-panel {
				border-bottom: 1px solid #E9E7E7;
			}
			/*侧边导航栏个人信息照片*/
			
			.main-nav>.nav-photo {
				margin: 10px 10px;
				width: 180px;
				height: 180px;
				border-radius: 50%;
				border: 0px solid red;
				background-image: url(../../img/20141009224754_AswrQ.jpeg);
				background-size: 100%;
			}
			/*侧边导航栏个人信息资料*/
			
			.main-nav>.nav-info {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 18px;
				color: #D3D4D3;
				letter-spacing: 3px;
			}
			/*侧边导航栏主菜单*/
			
			.mainMenu {
				display: flex;
				background-color: #8D8D8D;
				color: #E9E7E7;
				align-items: center;
				padding: 10px 0px 10px 0px;
				font-size: 16px;
				letter-spacing: 3px;
			
			}
			/*侧边导航栏主菜单悬浮*/
			
			.mainMenu:hover {
				/*background-color: #ADB5BD;*/
				cursor: pointer;
				color: #FFFFFF;
			}
			/*侧边导航栏子菜单*/
			
			.subMenu {
				display: flex;
				flex-direction: column;
				background-color: #95999C;
				letter-spacing: 3px;
			}
			/*侧边导航栏子菜单菜单项*/
			
			.menu-item:link,
			.menu-item:visited {
				padding: 10px 0px 10px 60px;
				text-decoration: none;
				font-size: 14px;
				color: #E9E7E7;
			}
			/*侧边导航栏子菜单菜单项悬浮*/
			
			.menu-item:hover {
				color: #FFFFFF;
				background-color: #454D55;
			}
			/**箭头图标合起来的样式*/
			
			.mainMenu.collapsed:after {
				content: "\f078";
			}
			/**箭头图标展开式时的样式*/
			
			.mainMenu::after {
				position: absolute;
				border: none;
				content: "\f077";
				font-family: FontAwesome;
				font-size: 15px;
				right: 10px;
			}
			
			.fist-fa {
				padding-right: 10px;
				margin-left: 15px;
			}
			
			.contentFrame{
				width: 100%;
				height: 100%;
				border:none;
			}
		</style>

	</head>

	<body>
		<div class="my-container" id="main-container">
			<div class="main-title">
				<div class="title-logo">
					加中实训办公平台
				</div>
				<!--个人信息-->
				<div class="personal-info">
					<div class="title-photo"></div>
					<div class="dropdown-toggle title-info" data-toggle="dropdown">
						<span>{{currUser.u_name}}</span>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="#">个人中心</a>
							<a class="dropdown-item" href="#">修改密码</a>
							<a class="dropdown-item" href="#" @click.prevent="exit">安全退出</a>
						</div>
					</div>
				</div>

			</div>

			<div class="main-nav">

				<div class="nav-photo"></div>
				<div class="nav-info">
					<label>{{currUser.u_name}}</label>
					<label>行政专员</label>
				</div>

				<!--菜单开始-->
				<div class="accordion" id="menu">
					
					<div class="menu-panel" v-for="mainMenu in menuList">
						<div class="mainMenu collapsed" data-toggle="collapse" :data-target="'#menu'+mainMenu.menuId">
							<i class="fa fa-bars fist-fa"></i> {{mainMenu.menuName}}
						</div>
						<div :id="'menu'+mainMenu.menuId" class="subMenu collapse" data-parent="#menu">
							<a class="menu-item" target="contentFrame"  v-for="subMenu in mainMenu.subMenuList" :href="subMenu.menuUrl">{{subMenu.menuName}}</a>
							
						</div>
					</div>
					<!--菜单结束-->

					
				</div>

			</div>

			<div class="main-content">
				<iframe name="contentFrame" class="contentFrame"></iframe>
			</div>

			<div class="main-bottom">
				&copy;2020-2010 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;加中实训研发部
			</div>
		</div>
		<script type="text/javascript" src="../../js/jquery-3.4.1.min.js" ></script>
		<script type="text/javascript" src="../../js/popper.min.js" ></script>
		<script type="text/javascript" src="../../js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="../../js/vue.min.js" ></script>
		<script type="text/javascript" src="../../js/axios.min.js" ></script>
		<script type="text/javascript" src="../../layer-v3.1.1/layer/layer.js" ></script>
		
		<script>
			// 创建实例时设置配置的默认值
			let $axios = axios.create({
			 	 baseURL: 'http://localhost/',//设置基本路径
			  // `withCredentials` 表示跨域请求时是否需要使用凭证(是否发送sessionid)
	  				withCredentials: true, // 默认的
			});
		
			let vue = new Vue({
				el: '#main-container',
				data: {
					currUser:{},//当前登录的用户
					menuList:[]
				},
				methods: {
					
					/**从服务端获取当前用户*/
					getCurrUser(){
						let index = layer.load(0);
						$axios.get('safty/hmoe/getCurrUser')
							.then((response)=>{
								layer.close(index);
								if(response.data){
									this.currUser = response.data;
									console.log(this.currUser.u_id+"----");
									
									$axios.get('safty/hmoe/menuList',{params:{u_id:this.currUser.u_id}})
										.then((response)=>{
											this.menuList = response.data;
											
										})
										.catch((err)=>{
											layer.close(index);
											layer.msg("服务器升级中....",{icon:2});
										});
								}else{
									location.href="../login/index.html";
								}
								
							})
							.catch((err)=>{
								layer.close(index);
								layer.msg("服务器升级中....",{icon:2});
							});
					},
					/**退出*/
					exit(){
						let index = layer.load(0);
						$axios.get('safty/hmoe/exit')
							.then((response)=>{
									layer.close(index);
									let result = response.data;
									if(result.success){
										this.currUser = {};
										location.href="../login/index.html";
									}
									
								
								
							})
							.catch((err)=>{
								layer.close(index);
								layer.msg("服务器升级中....",{icon:2});
							});
					},
					queryMenuList(){
						
					}
				},
				mounted() {
					this.getCurrUser();
					this.queryMenuList();
				}
			});
		</script>
	</body>

</html>